<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table v-if="dataLoaded && userinfo.length > 0" v-loading="listLoading" :data="userinfo" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="姓名" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="住院号" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.admission_no }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="月份" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.month }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="月总训练时间" width="110">
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.month_run_time_sum >= 1200 ? 'green' : 'red'
            }"
          >
            {{ formatTrainingTime(scope.row.month_run_time_sum) }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 无数据提示 -->
    <div v-else-if="dataLoaded && userinfo.length === 0" class="no-data">
      该用户没有训练数据
    </div>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { ratingsMonthTimeSum } from '@/api/nurse/ratings_time_sum' // 导入查询接口
import Pagination from '@/components/Pagination'

export default {
  name: 'RatingsMonthTimeSum',
  components: { Pagination },
  data() {
    return {
      userinfo: [],
      total: 0,
      listLoading: true,
      dataLoaded: false, // 新增数据加载完成标识
      listQuery: {
        page: 1,
        limit: 10,
        user_id: '' // 添加 user_id 过滤字段
      }
    }
  },
  created() {
    const userIdFromRoute = this.$route.query.id
    if (userIdFromRoute) {
      this.listQuery.user_id = userIdFromRoute
    }

    console.log('获得的 user_id:', this.listQuery.user_id)

    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      ratingsMonthTimeSum(this.listQuery).then(response => {
        // 确保过滤逻辑正确，检查 user_id 的位置和类型
        const filteredData = response.data.userinfo.filter(item =>
          !this.listQuery.user_id || item[0].toString() === this.listQuery.user_id.toString() // 根据 user_id 过滤
        )

        console.log('Filtered data:', filteredData) // 检查过滤后的数据

        const start = (this.listQuery.page - 1) * this.listQuery.limit
        const end = start + this.listQuery.limit
        const paginatedData = filteredData.slice(start, end)

        this.userinfo = paginatedData.map(item => ({
          user_id: item[0],
          name: item[1],
          admission_no: item[2],
          month: item[3],
          month_run_time_sum: item[4]
        }))

        this.total = filteredData.length
        this.listLoading = false
        this.dataLoaded = true // 数据加载完成后设置为 true
      }).catch(error => {
        console.error('Failed to fetch data:', error)
        this.listLoading = false
        this.dataLoaded = true // 即使发生错误也标记数据已加载
      })
    },
    formatTrainingTime(seconds) {
      // 将秒数转换为小时、分钟和秒的格式
      const hours = Math.floor(seconds / 3600)
      const mins = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      return `${hours}小时${mins}分${secs}秒`
    }
  }
}
</script>

<style scoped>
.no-data {
  text-align: center;
  font-size: 16px;
  color: #999;
  padding: 20px 0;
}
</style>
